<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${exam.courseName} - 考试作答</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .question-block {
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #e9ecef;
        }
        .option-block {
            margin-bottom: 0.5rem;
        }
        .timer-container {
            position: sticky;
            top: 20px;
            z-index: 100;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/dashboard"><i class="fa fa-graduation-cap me-2"></i>学生考试管理系统</a>
            <div class="navbar-text ms-auto">
                <span class="me-3"><i class="fa fa-user me-1"></i>${sessionScope.student.name}</span>
                <span class="me-3"><i class="fa fa-id-card me-1"></i>${sessionScope.student.studentId}</span>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="row">
            <!-- 考试信息和计时器 -->
            <div class="col-md-3">
                <div class="card timer-container bg-light">
                    <div class="card-body">
                        <h5 class="card-title text-center mb-4"><i class="fa fa-clock-o me-2"></i>考试计时器</h5>
                        <div class="display-4 text-center mb-3" id="timer">00:00:00</div>
                        <div class="alert alert-warning text-center">
                            <i class="fa fa-info-circle me-1"></i>考试将在结束前10分钟提醒
                        </div>
                        <ul class="list-group">
                            <li class="list-group-item"><strong>课程名称:</strong> ${exam.courseName}</li>
                            <li class="list-group-item"><strong>考试时间:</strong> ${exam.startTime} - ${exam.endTime}</li>
                            <li class="list-group-item"><strong>考试时长:</strong> ${exam.duration}分钟</li>
                            <li class="list-group-item"><strong>总分:</strong> ${exam.totalScore}分</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 考试题目 -->
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h4 class="mb-0"><i class="fa fa-book me-2"></i>${exam.courseName} - 考试题目</h4>
                    </div>
                    <div class="card-body">
                        <form id="examForm" action="/exams" method="post">
                            <input type="hidden" name="examId" value="${exam.examId}">

                            <!-- 题目列表 -->
                            <div class="questions-container">
                                <!-- 此处应动态生成题目，实际项目中通过JSTL或JavaScript渲染 -->
                                <div class="question-block">
                                    <h5><span class="badge bg-primary me-2">1</span>以下关于Java的说法正确的是？</h5>
                                    <div class="option-block">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="q1" id="q1a" value="A">
                                            <label class="form-check-label" for="q1a">A. Java是一种编译型语言</label>
                                        </div>
                                    </div>
                                    <div class="option-block">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="q1" id="q1b" value="B">
                                            <label class="form-check-label" for="q1b">B. Java不支持面向对象编程</label>
                                        </div>
                                    </div>
                                    <div class="option-block">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="q1" id="q1c" value="C">
                                            <label class="form-check-label" for="q1c">C. Java程序只能在Windows系统运行</label>
                                        </div>
                                    </div>
                                    <div class="option-block">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="q1" id="q1d" value="D">
                                            <label class="form-check-label" for="q1d">D. Java不需要虚拟机支持</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="question-block">
                                    <h5><span class="badge bg-primary me-2">2</span>Servlet的生命周期包括以下哪些阶段？（多选）</h5>
                                    <div class="option-block">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="q2" id="q2a" value="A">
                                            <label class="form-check-label" for="q2a">A. 初始化阶段</label>
                                        </div>
                                    </div>
                                    <div class="option-block">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="q2" id="q2b" value="B">
                                            <label class="form-check-label" for="q2b">B. 运行阶段</label>
                                        </div>
                                    </div>
                                    <div class="option-block">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="q2" id="q2c" value="C">
                                            <label class="form-check-label" for="q2c">C. 销毁阶段</label>
                                        </div>
                                    </div>
                                    <div class="option-block">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="q2" id="q2d" value="D">
                                            <label class="form-check-label" for="q2d">D. 休眠阶段</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 提交按钮 -->
                            <div class="d-flex justify-content-center mt-4">
                                <button type="submit" class="btn btn-success btn-lg me-3" onclick="return confirm('确定要提交考试吗？提交后将无法修改答案。')">
                                    <i class="fa fa-paper-plane me-2"></i>提交考试
                                </button>
                                <button type="button" class="btn btn-secondary btn-lg" onclick="window.location.href='/exams'">
                                    <i class="fa fa-arrow-left me-2"></i>返回列表
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script>
        // 计时器功能实现
        $(document).ready(function() {
            // 获取考试结束时间（实际项目中应从后端获取）
            const endTime = new Date("${exam.endTime}");
            updateTimer();
            setInterval(updateTimer, 1000);

            function updateTimer() {
                const now = new Date();
                const diff = endTime - now;

                if (diff <= 0) {
                    $('#timer').text('00:00:00');
                    alert('考试时间已结束，系统将自动提交答案！');
                    $('#examForm').submit();
                    return;
                }

                // 计算时分秒
                const hours = Math.floor(diff / (1000 * 60 * 60)).toString().padStart(2, '0');
                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, '0');
                const seconds = Math.floor((diff % (1000 * 60)) / 1000).toString().padStart(2, '0');

                $('#timer').text(`${hours}:${minutes}:${seconds}`);

                // 剩余10分钟提醒
                if (diff <= 10 * 60 * 1000) {
                    $('#timer').addClass('text-danger');
                }
            }
        });
    </script>
</body>
</html>